<ion-header>
  <ion-toolbar color="primary">
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>Materials & Scrolls</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding">
  <ng-container *ngIf="(gameService.player$ | async) as player">

    <ion-row *ngIf="player.$inventoryData">
      <ion-col size-xs="12" offset-xs="0" size-md="8" offset-md="2" class="ion-padding" *ngIf="player.$inventoryData.resources">
        <ion-card>
          <ion-card-header>
            <ion-row class="full-width">
              <ion-col size="9" class="vertical-center">
                <ion-card-title>Salvaged Resources</ion-card-title>
              </ion-col>

              <ion-col size="3" *ngIf="gameService.guild as guild">
                <ion-button color="dark" class="ion-float-right" fill="outline" size="small" (click)="resourcesActions($event, player.$inventoryData.resources, guild.resources)">
                  <ion-icon slot="icon-only" name="more"></ion-icon>
                </ion-button>
              </ion-col>
            </ion-row>
          </ion-card-header>

          <ion-card-content>
            <ion-list>
              <ion-item *ngFor="let resource of ['wood', 'clay', 'stone', 'astralium']">
                <ion-icon slot="start" [src]="'assets/icon/resource-' + resource + '.svg'" [ngClass]="[resource]"></ion-icon>

                <ion-label>
                  {{ resource | titlecase }} (x{{ player.$inventoryData.resources[resource] | number }})
                </ion-label>
              </ion-item>
            </ion-list>
          </ion-card-content>
        </ion-card>
      </ion-col>
    </ion-row>

    <ion-row *ngIf="player.$petsData">
      <ion-col size-xs="12" offset-xs="0" size-md="8" offset-md="2" class="ion-padding">
        <ion-card>
          <ion-card-header>
            <ion-card-title>Pet Enhancement Materials</ion-card-title>
          </ion-card-header>

          <ion-card-content>
            <ion-list>
              <ion-item *ngFor="let crystal of crystals">
                <ion-icon slot="start" [src]="'assets/icon/symbol-crystal.svg'" [style.color]="crystal.color"></ion-icon>

                <ion-label>
                  {{ crystal.name }} Crystal (x{{ player.$petsData.ascensionMaterials['Crystal' + crystal.name] || 0 | number }})
                </ion-label>
              </ion-item>
            </ion-list>
          </ion-card-content>
        </ion-card>
      </ion-col>
    </ion-row>

    <ion-row *ngIf="player.$inventoryData">
      <ion-col size-xs="12" offset-xs="0" size-md="8" offset-md="2" class="ion-padding" *ngIf="(player.$inventoryData.teleportScrolls | keyvalue).length">
        <ion-card>
          <ion-card-header>
            <ion-card-title>Teleport Scrolls</ion-card-title>
          </ion-card-header>

          <ion-card-content>
            <ion-list>
              <ion-item *ngFor="let scroll of player.$inventoryData.teleportScrolls | keyvalue" [class.ion-hide]="scroll.value === 0">
                <ion-icon slot="start" [src]="'assets/icon/symbol-scroll.svg'"></ion-icon>

                <ion-label>
                  {{ scroll.key }} Teleport Scroll (x{{ scroll.value }})
                </ion-label>

                <ion-button slot="end" (click)="useTeleportScroll(scroll.key)">Use</ion-button>
              </ion-item>
            </ion-list>
          </ion-card-content>
        </ion-card>
      </ion-col>
    </ion-row>

    <ion-row *ngIf="player.$inventoryData">
      <ion-col size-xs="12" offset-xs="0" size-md="8" offset-md="2" class="ion-padding" *ngIf="player.$inventoryData.buffScrolls.length">
        <ion-card>
          <ion-card-header>
            <ion-card-title>Booster Scrolls</ion-card-title>
          </ion-card-header>

          <ion-card-content>
            <ion-list>
              <ion-item *ngFor="let scroll of player.$inventoryData.buffScrolls" [class.ion-hide]="!canSeeBuffScroll(scroll)">
                <ion-icon slot="start" [src]="'assets/icon/symbol-scroll.svg'"></ion-icon>

                <ion-label>
                  {{ scroll.name }}
                  <p>
                    <span class="ion-margin-end" *ngFor="let stat of scroll.stats | keyvalue" [class.ion-hide]="stat.value === 0">
                      <ion-icon [src]="'assets/icon/stat-' + stat.key + '.svg'" class="ion-margin-end"></ion-icon>  {{ stat.key | uppercase }} +{{ stat.value }}
                    </span>
                  </p>
                  <p>Expires {{ scroll.expiresAt | date:'medium' }}</p>
                </ion-label>

                <ion-button slot="end" (click)="useBuffScroll(scroll.id)">Use</ion-button>
              </ion-item>
            </ion-list>
          </ion-card-content>
        </ion-card>
      </ion-col>
    </ion-row>

  </ng-container>
</ion-content>
